<!--分类-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分类</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="./css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/loading.css"/>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/assort.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel=" stylesheet" href="./css/swiper.min.css">
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300)
        })
    </script>
    <style>
        body{
            background-color: #fff;
        }
        .sch-cont { margin-left: 0.2rem; font-size: .2rem; color: #666; }
        .sch-cont .section { padding: 0.225rem 0 0.25rem; }
        .sch-cont .tit { font-size: .16rem; }
        .sch-cont .tit i { margin-right: .05rem; font-size: .15rem; color: #bfbfbf; }
        .sch-cont .tags { overflow: hidden;
            font-size: 0.15rem; }
        .sch-cont .tag { float: left; margin: .165rem .05rem 0; padding: 0 .05rem; border-radius: .08rem; background-color: #f4f4f4;
        }
        .sch-cont .tag.actice { color: #ff395c; }
        .sch-clear { padding-bottom: 0.15rem; text-align: center; font-size: .15rem; }
        .sch-clear a { color: inherit; }
        .sch-clear i { font-size: .15rem; color: #ff5f5f; }
    </style>
</head>

<body style="background-color: #fff;">
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<div class="assort_box">
<div class="home_title">
    <!--<div class="t_left"><a href="#">福利</a></div>-->
    <div class="t_center">
        <div class="inp">
            <input type="text"  placeholder="复制商品标题省钱买" value="">
            <div class="in_btn"><a>&#10006</a></div>
        </div>
    </div>
    <!--<div class="t_right"><a href="#">分类</a></div>-->
</div>

<div class="contaniner fixed-cont">
    <aside class="assort">
        <ul>
            <li class="active"><span>男装</span></li>
            <li><span>女装</span></li>
            <li><span>母婴</span></li>
            <li><span>运动</span></li>
            <li><span>个人护理</span></li>
            <li><span>内衣袜子</span></li>
            <li><span>数码家电</span></li>
            <li><span>其他</span></li>
        </ul>
    </aside>

    <section class="assort-cont">
        <dl class="current">
            <dd><a href="class.html"><img src="images/sort/n1.jpg"/><p>T恤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n2.jpg"/><p>休闲裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n3.jpg"/><p>外套</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n4.jpg"/><p>短裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n5.jpg"/><p>牛仔裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n6.jpg"/><p>衬衫</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n7.jpg"/><p>套装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/n8.jpg"/><p>防晒衣</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/g1.jpg"/><p>套装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g2.jpg"/><p>T恤吊带</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g3.jpg"/><p>妈妈装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g4.jpg"/><p>牛仔裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g5.jpg"/><p>短裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g6.jpg"/><p>裤装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g7.jpg"/><p>情侣装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/g8.jpg"/><p>半身裙</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/m1.jpg"/><p>婴童用品</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m2.jpg"/><p>婴童服饰</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m3.jpg"/><p>玩具乐器</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m4.jpg"/><p>孕产用品</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m5.jpg"/><p>婴童奶粉</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m6.jpg"/><p>尿不湿</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m7.jpg"/><p>婴童湿巾</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/m8.jpg"/><p>奶瓶奶嘴</p></a></dd>
        </dl>

        <dl>
            <dd><a href="class.html"><img src="images/sort/y1.jpg"/><p>骑行装备</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y2.jpg"/><p>运动内衣</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y3.jpg"/><p>户外</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y4.jpg"/><p>器材</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y5.jpg"/><p>游泳</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y6.jpg"/><p>女士泳衣</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y7.jpg"/><p>瑜伽</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/y8.jpg"/><p>健身服装</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/f1.jpg"/><p>每周爆款</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f2.jpg"/><p>面部护理</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f3.jpg"/><p>天猫美妆</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f4.jpg"/><p>女性卫生</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f5.jpg"/><p>面膜</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f6.jpg"/><p>护肤套装</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f7.jpg"/><p>卸妆洁面</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/f8.jpg"/><p>夏日防晒</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/b1.jpg"/><p>文胸</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b2.jpg"/><p>内裤</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b3.jpg"/><p>睡衣</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b4.jpg"/><p>袜子</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b5.jpg"/><p>丝袜</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b6.jpg"/><p>抹胸背心</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b7.jpg"/><p>塑身</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/b8.jpg"/><p>文胸套装b</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/s1.jpg"/><p>超级爆款</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s2.jpg"/><p>手机壳</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s3.jpg"/><p>手机膜</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s4.jpg"/><p>电脑周边</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s5.jpg"/><p>厨房电s器</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s6.jpg"/><p>生活电器</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s7.jpg"/><p>电饭煲/锅</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/s8.jpg"/><p>大家电</p></a></dd>
        </dl>
        <dl>
            <dd><a href="class.html"><img src="images/sort/q1.jpg"/><p>清洁用品</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q2.jpg"/><p>个人护理</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q3.jpg"/><p>图书文具</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q4.jpg"/><p>日用杂货</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q5.jpg"/><p>收纳神器</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q6.jpg"/><p>餐厨用品</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q7.jpg"/><p>绿植花卉</p></a></dd>
            <dd><a href="class.html"><img src="images/sort/q8.jpg"/><p>车品装饰</p></a></dd>
        </dl>



    </section>
</div>

<div class="footer_box">
    <ul>
        <li><a href="index.html" >首页</a></li>
        <li><a href="assort.html" style="color: #fc5459;">分类</a></li>
        <li><a href="activity.html">活动</a></li>
        <li><a href="personalCenter.html">我的</a></li>
    </ul>
</div>

</div>
<div class="search_index">
    <div class="search_title">
        <div class="t_left"><a href="#"></a></div>
        <div class="t_center">
            <div class="inp">
                <input type="text"  placeholder="复制商品标题省钱买" value="">
                <div class="in_btn"><a>&#10006</a></div>
            </div>
        </div>
        <div class="t_right"><a href="#">搜索</a></div>
    </div>
    <div class="container">
        <div class="scroll-wrap">
            <div  >
                <div class="sch-cont">
                    <div class="section ">
                        <div class="tit"><i class="iconfont icon-hot"></i>热门搜索</div>
                        <div class="tags">
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag actice">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag actice">连衣裙</span><span class="tag">运动鞋</span>
                        </div>
                    </div>
                    <div class="section">
                        <div class="tit"><i class="iconfont icon-time"></i>最近搜索</div>
                        <div class="tags">
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span>
                        </div>
                    </div>
                </div>
                <div class="sch-clear">
                    <a href="javascript:void(0)"><i class="iconfont icon-shanchu"></i>清除搜索历史</a>
                </div>
            </div>
        </div>

    </div>
</div>

<script>

  $(function () {

      $(".assort ul li").on("click",function () {
          let index = $(this).index();
          console.log(index);
          $(this).addClass("active").siblings().removeClass("active");
          $(".assort-cont dl").eq(index).addClass("current").siblings().removeClass("current");
      });




      $(".search_index").hide();

      $(".inp input").focus(function () {
          console.log("66666666666666");
          $(".assort_box").hide();
          $(".search_index").show();
      });

      $(".search_title .t_left a").click(function () {
          $(".assort_box").show();
          $(".search_index").hide();
      });

      $(" .search_index .in_btn").click(function () {
          console.log("9");
          console.log($(" .search_index .inp input:first").val(""));
      })

  })
</script>
</body>
</html>